<template>
  <div class="app-container">
    <div class="change">
      <p>
        <span>申请内容</span>
        <el-input v-model="tempData.submitContent" :disabled="islook" type="textarea" class="userselect" placeholder="请输入申请内容"/>
      </p>
      <p>
        <span>提交人</span>
        <el-input v-model="tempData.submitPerson" disabled type="text" class="userselect" />
      </p>
      <p v-if="!islook">
        <span>维修设备</span>
        <el-input v-model="proname" :disabled="islook" @focus="checkPro" type="text" class="userselect" placeholder="请选择设备" />
      </p>
    </div>
    <div v-if="islook">
      <el-table :data="shebeilist" border style="width: 100%">
        <el-table-column label="品牌" width="150" align="center" prop="brand"></el-table-column>
          <el-table-column label="设备名称" width="150" align="center" prop="commodityName"></el-table-column>
          <el-table-column label="单位" width="80" align="center" prop="nuit"></el-table-column>
          <el-table-column label="数量" width="80" align="center" prop="number"></el-table-column>
          <!-- <el-table-column label="价格" align="center" prop="price"></el-table-column> -->
					<el-table-column label="位号" align="center" prop="bitNumber"></el-table-column>
					<el-table-column label="责任人" align="center" prop="maintainPerson"></el-table-column>
					<el-table-column label="是否定期检修" align="center" prop="isRepair"></el-table-column>
					<el-table-column label="定期检修周期" align="center" prop="repairPeriod"></el-table-column>
					<el-table-column label="PID编码" align="center" prop="pidNumber"></el-table-column>
					<el-table-column label="备注" align="center" prop="remarks"></el-table-column>
					<el-table-column label="规格" align="center" prop="model"></el-table-column>
					<el-table-column label="部门" align="center" prop="departments"></el-table-column>
					<el-table-column label="序号" align="center" prop="serialnumber"></el-table-column>
					<el-table-column label="固定资产编号" align="center" prop="assetnumber"></el-table-column>
					<el-table-column label="总重" align="center" prop="allkg"></el-table-column>
					<el-table-column label="安装时间" align="center" prop="installtime"></el-table-column>
					<el-table-column label="使用时间" align="center" prop="usetime"></el-table-column>
					<el-table-column label="功率" align="center" prop="rateOfWork"></el-table-column>
					<el-table-column label="图片" align="center" width="120">
						<template slot-scope="scope">
							<img :src="scope.row.imgurl" class="shebei" />
						</template>
					</el-table-column>
      </el-table>
    </div>
		<div class="submits">
		  <div class="save" @click="save" :class="isClick ? 'disable' : ''" v-if="!islook">保存</div>
		  <div class="nosave" @click="nosave" v-if="!islook">取消</div>
			<div class="save" @click="back" v-if="islook">返回</div>
		</div>
    <!-- 采购员弹窗 -->
    <el-dialog title="设备列表" :visible.sync="buyerShow" :close-on-click-modal="false" width="80%">
      <div class="files">
        <div class="files-btm">
          <el-table 
            :data="tableData"
            highlight-current-row
            @current-change="handlePeople"
            style="margin-bottom: 20px;" 
            :show-header="true" >
            <el-table-column label="品牌" width="150" align="center" prop="brand"></el-table-column>
            <el-table-column label="设备名称" width="150" align="center" prop="commodityName"></el-table-column>
            <el-table-column label="单位" width="80" align="center" prop="nuit"></el-table-column>
            <el-table-column label="规格" align="center" prop="model"></el-table-column>
            <el-table-column label="部门" align="center" prop="departments"></el-table-column>
            <!-- <el-table-column align="center" prop="status" label="状态"></el-table-column> -->
          </el-table>
          <el-pagination background hide-on-single-page layout="prev, pager, next" :total="total" @prev-click="goPrev" @next-click="goNext" />
        </div>
			</div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="buyerShow = false">取 消</el-button>
        <el-button type="primary" @click="buyerShow = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import { addWxSq,updateWxSq,selectWxSq,deleteWxSq,wxSqLc,getDepartment } from "@/api/bumen";
	import { uploadFile } from '@/api/people'
	export default {
		data(){
			return{
				tempData: {},
				writeOradd: 0,   //1修改还是0增加
        islook: false,
        proname: '',  //产品名
        buyerShow: false,
        total: 1,
        tableData: '',
        shebeilist: [],
        isClick: false
			}
		},
		mounted() {
      // console.log(this.$route.params)
      this.search()
			if(this.$route.params.look){
				this.islook = true
			}
			if(this.$route.params.options){
        console.log('params',this.$route.params.options)
        this.tempData = JSON.parse(this.$route.params.options)
        console.log('this.tempData',this.tempData)
        this.writeOradd = 1
        this.proname = this.tempData.departmentFacility.commodityName
        this.shebeilist.push(this.tempData.departmentFacility)
        console.log(this.shebeilist)
			}else{
				this.writeOradd = 0
			}
			console.log(this.tempData)
		},
		methods:{
      // 搜索设备
      search(item) {
        console.log("搜索");
        const user = this.$store.state.user.userInfo[0]
        this.tempData.submitPerson = user.username
        console.log(user)
        getDepartment({}).then(res => {
          console.log('res',res);
          const filterlist = res.data.filter(item => item.departments === user.departments)
          // const filterlist = res.data
          console.log(filterlist)
          this.tableData = filterlist;
        });
      },
			save(){
        this.isClick = true
        let mydata = new Date()
        const kaishi = mydata.toLocaleDateString().replace(/\//g,'-')
        this.tempData.submitTime = kaishi
				if(this.writeOradd == 0){
					addWxSq(this.tempData).then(res => {
						console.log(res)
						this.$message({
							message: res.message,
							type: 'success'
            })
            this.$router.go(-1)
					})
				}else{
					delete this.tempData.insertTime
					delete this.tempData.updateTime
					updateWxSq(this.tempData).then(res => {
						console.log(res)
						this.$message({
							message: res.message,
							type: 'success'
            })
            this.$router.go(-1)
					})
				}
			},
			nosave(){
				this.$router.go(-1)
			},
			back(){
				this.$router.go(-1)
			},
			checkPro(){
        this.buyerShow = true
      },
      goPrev(page) {
      console.log(page);
      },
      goNext(page) {
        console.log(page);
      },
      resetList() {
        this.rolename = "";
      },
      // 选择操作人员
      handlePeople(row){
        console.log(row)
        this.proname = row.commodityName
        this.tempData.parentId = row.id
        this.buyerShow = false
      },
		}
	}
</script>

<style scoped lang="scss">
	.disable{
		pointer-events: none;
		background: #808080 !important;
	}
	.change {
	  display: flex;
	  flex-wrap: wrap;
	  background: #fff;
	  border-radius: 8px;
	  padding: 20px 0;
	  > p {
	    width: 33%;
	    font-size: 14px;
	    display: flex;
	    align-items: center;
	    color: #333;
	    /deep/.el-input__inner {
	      // width: inherit;
	      background: none;
	      height: 32px;
	      // line-height: 32px;
	      color: #333;
	      border: 1px solid rgba(0, 0, 0, 0.1);
	      padding: 0 25px;
	    }
	    /deep/.el-input__icon {
	      line-height: 32px;
	    }
	    .userselect {
	      // max-width: 250px;
	      flex: 1;
	    }
	
	    > span {
	      display: block;
	      width: 100px;
	      text-align: right;
	      padding-right: 15px;
	    }
	    > input {
	      width: inherit;
	      flex: 1;
	      height: 32px;
	      border-radius: 3px;
	      border: 1px solid rgba(0, 0, 0, 0.1);
	      padding-left: 10px;
	      color: #333;
	    }
			> textarea{
				width: inherit;
				flex: 1;
				height: 60px;
				border-radius: 3px;
				border: 1px solid rgba(0, 0, 0, 0.1);
				padding: 10px;
			}
	  }
	}
	// .avatar-uploader .el-upload {
	//   border: 1px dashed #999 !important;
	//   border-radius: 6px;
	//   cursor: pointer;
	//   position: relative;
	//   overflow: hidden;
	//   width: 100%;
	// }
	// .avatar-uploader .el-upload:hover {
	//   border-color: #409eff;
	// }
	
	// .avatar-uploader-icon {
	//   font-size: 28px;
	//   color: #8c939d;
	//   width: 100px;
	//   height: 100px;
	//   line-height: 100px;
	//   text-align: center;
	// }
	// .avatar {
	//   width: 100px;
	//   height: 100px;
	//   display: block;
  // }
  
  .shebei{
    width: 50px;
    height: 50px;
  }
	.submits {
	  display: flex;
		background: #fff;
	  padding: 20px 20px;
		border-radius: 8px;
		margin-top: 20px;
		// border-top: 1px solid #ccc;
	  justify-content: flex-end;
	  align-items: center;
	  > div {
	    width: 80px;
	    height: 32px;
	    text-align: center;
	    line-height: 32px;
	    color: #fff;
	    font-size: 14px;
	    border-radius: 4px;
	    margin-left: 30px;
	    cursor: pointer;
	  }
	  .save {
	    background: #18a05e;
	  }
	  .nosave {
	    background: #999;
	  }
	}
</style>